<template lang="pug">
	.top-filter-wrap
		.filter-main
			.filter-item(v-for="(item,index) in options" :key="index" @click="showDropDown(index)" :class="{'active':actItemIndex===index}")
				label {{item.title}}
				.arrow
		ul.filter-drop-down(v-if="actItemIndex>=0")
			li(v-for="(item,index) in options[actItemIndex].content" :key="index" @click="select(item.title,index)" :class="{'active':options[actItemIndex].actConIndex===index}") {{item.title}}
		.backdrop(:class="{'active':actItemIndex>=0}" @click="closeFilter")


</template>

<script>
export default {
	name: 'top-filter',
	data() {
		return {
			actItemIndex: -1 //当前活动筛选项索引
		}
	},
	props: {
		options: {
			type: Array,
			default: () => []
		}
	},
	created() {},
	mounted() {},
	methods: {
		showDropDown(index) {
			//筛选导航点击切换
			if (this.actItemIndex !== index) {
				this.actItemIndex = index
			} else {
				this.actItemIndex = -1
			}
		},
		closeFilter() {
			this.actItemIndex = -1
		},
		select(title, index) {
			this.options[this.actItemIndex].title = title
			this.options[this.actItemIndex].actConIndex = index
			let options = this.options
			this.actItemIndex = -1
			this.$emit('getOptions', options)
		}
	}
}
</script>

<style lang="stylus">
	.top-filter-wrap
		position relative
		font-size 28px
		.filter-main
			display flex
			height 84px
			line-height 84px
			background-color white
			z-index 11
			position relative
			.filter-item
				text-align center
				flex 1
				color blackFontColor4C
				.arrow
					width 20px
					height 20px
					display inline-block
					margin-left 8px
					vertical-align -1px
					centerBackground('../../assets/image/healthCard/arrowDown.png')
				&.active
					color themeColor
					.arrow
						centerBackground('../../assets/image/healthCard/arrowUp.png')
		.filter-drop-down
			position absolute
			top 84px
			width 100%
			background-color white
			line-height 80px
			color blackFontColor1A
			padding 15px 0
			max-height 550px
			z-index 11
			scrollY()
			li
				padding-left 62px
				&.active
					color themeColor
		.backdrop
			z-index 10
			position fixed
			cover()
			background-color rgba(0,0,0,0.5)
			pointer-events none
			opacity 0
			&.active
				opacity 1
				pointer-events all
</style>
